<!DOCTYPE html>
<html>
	<head>
		<title>Nested Kwicks Example</title>

		<link rel='stylesheet' type='text/css' href='../jquery.kwicks.css' />
		<style type='text/css'>
			.kwicks-vertical {
				width: 445px;
				height: 445px;
			}
			.kwicks-vertical > li {
				height: 145px;
				margin-top: 5px;
			}
			.kwicks-horizontal {
				width: 445px;
				height: 100%;
			}
			.kwicks-horizontal > li {
				height: 100%;
				width: 145px;
				float: left;
				margin-left: 5px;
				background-color: #ffaa00;
			}
		</style>
	</head>
	
	<body>
		<ul class='kwicks kwicks-vertical'>
			<li>
				<ul class='kwicks kwicks-horizontal'>
					<li></li><li></li><li></li>
				</ul>
			</li>
			<li>
				<ul class='kwicks kwicks-horizontal'>
					<li></li><li></li><li></li>
				</ul>
			</li>
			<li>
				<ul class='kwicks kwicks-horizontal'>
					<li></li><li></li><li></li>
				</ul>
			</li>
		</ul>

		<script src='js/jquery-1.8.1.min.js' type='text/javascript'></script>
		<script src='../jquery.kwicks.js' type='text/javascript'></script>
		
		<script type='text/javascript'>
			$(function() {
				$('.kwicks-vertical').kwicks({
					maxSize : 295,
					spacing : 5,
					isVertical: true,
					behavior: 'menu',
					selectOnClick: false
				});

				$('.kwicks-horizontal').kwicks({
					maxSize: 295,
					spacing: 5,
					behavior: 'menu',
					selectOnClick: false
				});
			});
		</script>
	</body>
</html>